<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-06-08 10:52:05
-->
<template>
  <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm">
      <h2 class="mt-5 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
        登录
      </h2>
    </div>

    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-md">
      <form
        class="space-y-6 bg-white rounded-lg p-6"
        onsubmit="return false"
        id="loginForm"
        @submit="login"
        method="POST"
      >
        <div>
          <label for="email" class="block text-sm font-medium leading-6 text-gray-900">邮箱</label>
          <div class="mt-2">
            <input
              id="email"
              name="email"
              type="email"
              autocomplete="email"
              required
              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
        </div>

        <div>
          <div class="flex items-center justify-between">
            <label for="password" class="block text-sm font-medium leading-6 text-gray-900">
              密码
            </label>
          </div>
          <div class="mt-2">
            <input
              id="password"
              name="password"
              type="password"
              autocomplete="current-password"
              required
              class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            />
          </div>
          <div>
            <div class="my-4 flex justify-between">
              <div>
                <input
                  type="checkbox"
                  checked="checked"
                  class="checkbox checkbox-primary checkbox-sm"
                /><span class="ml-2">记住密码</span>
              </div>
              <div class="text-sm">
                <a href="#resetPwd" class="font-semibold text-indigo-600 hover:text-indigo-500"
                  >忘记密码?</a
                >
              </div>
            </div>
          </div>
        </div>

        <div>
          <button
            type="submit"
            class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
          >
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-5 text-center text-sm text-gray-500">
        没有账号?
        <a href="#regist" class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
          点击注册
        </a>
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { http } from '@/http'
import { UserModel } from '@/modal/user'
import { rootUserStore } from '@/store/user'
const store = rootUserStore()
const router = useRouter()

const login = () => {
  const form = document.querySelector('#loginForm') as any
  const formData = new FormData(form)
  const email = formData.get('email')
  const password = formData.get('password')
  http.post<UserModel>('/api/login', { email, password }).then(res => {
    const { code, data } = res
    if (code === 200) {
      store.setInfo(data)
      router.push({ name: 'welcome', query: { appName: 'vite 多页面应用' } })
    }
  })
}
</script>

<style lang="scss" scoped></style>
